<template>
  <div>
    <vol-box :lazy="true" :model.sync="model.box1" title="设置下单信息" :height="350" :width="700" :padding="10">
      <div class="df just">
        <div></div>
        <div class="df">
          <a href="https://api.boss.i-town.cn/api/SmallUserArchives/DownLoadUserTemplate" class="ml10" style="line-height:35px;">下载人员信息模板</a>
          <el-button type="success" size="small" class="ml10" @click="userAdd">人员添加</el-button>
          <div style="width: 120px" v-show="url">
            <VolUploadFile :url="url" v-show="url" :upload-after="uploadAfter" class="ml10"></VolUploadFile>
          </div>
          <el-button type="success" size="small" class="ml10" @click="url = '/api/SmallUserArchives/Import'" v-show="!url">导入人员信息</el-button>
        </div>
      </div>
      <el-table class="table" ref="goodsTableref2" :data="userList" tooltip-effect="dark" height="300" style="width: 100%;">
        <el-table-column type="index" label="序号" width="50px" align="center"></el-table-column>
        <el-table-column prop="touristname" label="姓名" width="85px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="id_card" label="身份证" show-overflow-tooltip></el-table-column>
        <el-table-column prop="num" label="商品数量">
          <template slot-scope="scope">
            <el-input-number ref="refNumber" controls-position="right" size="mini" :min="1" v-model="scope.row.num"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="90px">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editFun(scope.row,scope.$index)">修改</el-button>
            <el-button type="text" size="small" @click="deluser(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" style="height:30px;">
        <Button type="success" @click="okFun">确认</Button>
      </div>
    </vol-box>
    <vol-box :lazy="true" :model.sync="model.box2" :title="index?'编辑人员':'新增人员'" :height="220" :width="300" :padding="20">
      <el-form :rules="rules" ref="ruleForm" :model="form" label-width="80px">
        <el-form-item label="姓名" prop="touristname">
          <el-input v-model="form.touristname" size="small" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" size="small" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="id_card">
          <el-input v-model="form.id_card" size="small" placeholder="请输入身份证号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" style="height:30px;">
        <Button type="success" @click="onSubmit">确认</Button>
      </div>
    </vol-box>
  </div>
</template>
<script>
import VolBox from "@/components/basic/VolBox.vue";
import VolForm from "@/components/basic/VolForm.vue";
import VolUploadFile from "@/components/basic/VolUploadFile.vue";
export default {
  components: {
    VolForm,
    "vol-box": VolBox,
    VolUploadFile
  },
  watch: {},
  created() { },
  methods: {
    open(objItem){
      this.objItem = objItem
      this.url = ''
      this.model.box1 = true
    },
    okFun(){
      if(this.userList.length){
        this.http.post("/api/Mall_procure_task_people/AddBatchPeople",  this.userList).then(res => {});
      }
      this.model.box1 = false
    },
     // 添加人员弹窗
     userAdd(){
      this.model.box2 = true
      this.index = false
      this.$nextTick(()=>{
        this.$refs.ruleForm.resetFields();
      })
    },
    // 编辑人员弹窗
    editFun(row,i){
      this.model.box2 = true
      this.index = i
      this.form = JSON.parse(JSON.stringify(row))
    },
    // 删除人员
    deluser(i){
      this.userList.splice(i,1)
    },
    // 确认添加人员
    onSubmit(){
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if(this.index === false){
            this.userList.push({...this.form,num:1,taskid:this.objItem.id})
          }else{
            this.$set(this.userList,this.index,JSON.parse(JSON.stringify(this.form)))
          }
          this.model.box2 = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //导入
    uploadAfter(result) {
      this.http.post("/api/SmallUserArchives/ImportSmallOrderUser",{ filepath: result.data,disCode: this.objItem.supplierCode}).then(res => {
        if(res.data){
          this.userList=[]
          res.data.forEach((_,i)=>{
            this.userList.push({touristname:_.name,phone:_.phone,id_card:_.id_card,num:1,taskid:this.objItem.id}) 
          });
        }
        this.url = ''
        if (res.status) {
          this.$Message.success(res.message);
        } else {
          this.$Message.error(res.message);
        }
      });
      return true;
    },
  },
  data() {
    return {
      model: {
        box1: false,
        box2:false,
      },
      form:{
        touristname:'',
        phone:'',
        id_card:'',
      },
      rules: {
        touristname: [ { required: true, message: '请输入姓名', trigger: 'blur' }, ],
        phone: [ { required: true, message: '请输入手机号', trigger: 'blur' },],
        id_card: [{ required: true, message: '请输入身份证号', trigger: 'blur' },],
      },
      index:'',
      userList:[],
      url:'',
      objItem:{},
    };
  }
};
</script>
<style scoped>
.df{display: flex;height: 33px;}
.just{justify-content: space-between;}
</style>